<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="lib/prototype.js" language="javascript" type="text/javascript"></script>

<script>
var ajaxProgressAnim;
var ajaxProgressBg = new Image();
ajaxProgressBg.src = "/images/AjaxProgressBackground.jpg";
window.addEventListener("load", function(){
  initParticles();
  showParticles();
},false);
function mdrawAjaxProgress(){
  var start = new Date().getMilliseconds();
  drawAjaxProgress();
  console.info( new Date().getMilliseconds() - start );
}

function showParticles(){
  $('ajax-progress').innerHTML = '<div><canvas id="canvas" width="300" height="300"></canvas><button onclick="ajaxProgressSuccess(this)">Cancel</button></div>';
  ajaxProgressAnim = setInterval(drawParticles, 100);
}
var numParticles = 100;
function drawParticles(){
  //nitobi.Debug.log("drawParticles called");
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.save();
  
  //ctx.fillStyle = 'rgba(, 1, 1, 1)';
  //if( Math.random() > 0.3){
    ctx.clearRect(0,0, $('canvas').width, $('canvas').height); // Shadow
    
  //}
  //ctx.strokeStyle = 'rgba(0,153,255,0.4)';

  //ctx.strokeRect(10,10,100,100); // Shadow
  
  
  //ctx.translate(130, 150);
  ctx.fillStyle = 'rgba(255,255,255,0.4)';
  for(var i=0; i < numParticles; i++){
  //ctx.translate(translate[count][0], translate[count][1]);
  
  //ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  //ctx.translate(105,0);

  /* ctx.beginPath();
	ctx.moveTo(35,20);
	ctx.lineTo(63, 35);
	ctx.lineTo(60, 50);
	ctx.lineTo(30,35);
	ctx.closePath();
	ctx.fill();
	*/
	particles[i].update();
	particles[i].draw(ctx);
  }
  ctx.restore();
}
var gravity = 10;
var particles = [];
var Particle = Class.create({
  initialize: function(x, y){
    this.x = x;
	this.y = y;
	this.w = 300;
	this.h = 300;
	this.direction = 0;
	this.velocity = 0;
  },
  draw: function(ctx){
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    //ctx.fillRect(this.x, this.y, 2, 2);
	ctx.beginPath();
	ctx.arc(this.x, this.y, 13, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();
	ctx.arc(this.x - this.direction / 2, this.y - 12, 6, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();
	ctx.arc(this.x - this.direction, this.y - 16, 3, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.fill();
  },
  update: function(){
    if( Math.random() > 0.9 ){
	  this.direction = Math.random();
	  this.velocity = 3;
	}
    this.y += gravity;
	if( this.velocity > 0 ){
	
	  this.velocity -= 0.3;
	  this.x += this.direction * this.velocity;
	}
    if( this.y > this.h ){
      var x = Math.random() * this.w;
	  var y = Math.random() * this.h;
	  this.x = x;
	  this.y = y;
	}
  }
  });

function initParticles(){
  for(var i=0; i< numParticles; i++){
	particles[i] = new Particle(10000, 10000);
  }  
}


/* Geometry */
/** lines **/
function slope(x1, y1, x2, y2){
  return (y2 - y1) / (x2 - x1);
}
//slope intercept form
//y = mx + b
if( slope(0, 0, 2, 2) != 1 ){
  alert("Error slope wasn't 1");
}
if( slope(0, 0, 1, 2) != 2 ){
  alert("Error slope wasn't 2");
}
if( slope(0, 0, 2, 1) != 0.5 ){
  alert("Error slope wasn't 0.5");
}


//m - slope
//x1,y1 is a point on the line.

function yForPointsAndSlope(x1, y1, x2, m){
//Point-slope formula
//(y–y1) = m(x–x1)

  return (m * (x2 - x1)) + y1;
}
if( yForPointsAndSlope(0, 0, 3, 1) != 3){
  alert("Error 3,y isn't 3");
}
if( yForPointsAndSlope(0, 4, 12, 1) != 16){
  alert( yForPointsAndSlope(0, 4, 12, 1) );
}
//if( yForPointsAndSlope(1, 4, 5, 1)  

function xForPointsAndSlope(x1, y1, y2, m){
//Point-slope formula
//(y–y1) = m(x–x1)
//(y2 - y1) / m = x2 - x1
  return ((y2 - y1) / m) + x1;
}

if( xForPointsAndSlope(0, 0, 4, 1) != 4){
  alert("Error xForPointsAndSlope(0, 0, 4, 1) should be 4, but was " + xForPointsAndSlope(0, 0, 4, 1));
}
if( xForPointsAndSlope(1, 0, 4, 1) != 5){
  alert("Error xForPointsAndSlope(1, 0, 4, 1) should be 5, but was " + xForPointsAndSlope(1, 0, 4, 1));
}



function perpendicularSlopeTo(slope){
  return -1 / slope;
}

function arePerpendicular(slope1, slope2){
  return -1 == (slope1 * slop2);
}

var Line = Class.create({
  initialize: function(x1, y1, x2, y2){
    this.x1 = x1;
	this.x2 = x2;
	this.y1 = y1;
	this.y2 = y2;
  },
  slope: function(){
    //console.info("Sending " + this.x1);
    return slope(this.x1, this.y1, this.x2, this.y2);
  },
  yIntercept: function(x){
    return yForPointsAndSlope(this.x1, this.y1, x, this.slope());
  },
  xIntercept: function(y){
    return xForPointsAndSlope(this.x1, this.y1, y, this.slope());
  }
});
//var l = new Line(0, 0, 1, 1);
//console.info( l.slope() + " " + l.yIntercept(5) + " " + l.xIntercept(7));

var Region = Class.create({
  initialize: function(lines){
    this.lines = lines;
  },
  hitTest: function(x1, y1){
    var hit = 0;
	for(var i=0; i < this.lines.size(); i++){
	  
	  var line = this.lines[i];
	  var x = line.xIntercept(y1);
	  //console.info("intercept of " + x1 + "," + y1 + " is (" + x + ") line=" + line.x1 + "," + line.y1 + " " + line.x2 + "," + line.y2);
	  if(x > x1 &&  //we are to the right of our origional point
	   ((line.x1 <= x && x <= line.x2) ||
	    (line.x2 <= x && x <= line.x1))){
		
	    //console.info(x1 + "," + y1 + " crosses " + line.x1 + "," + line.y1 + " " + line.x2 + "," + line.y2);
	    hit++;
	  }else{
	  	//    console.warn(x1 + "," + y1 + " doesn't crosses " + line.x1 + "," + line.y1 + " " + 
		//             line.x2 + "," + line.y2);
	
	  }
	}
	//console.info("hit=" + hit);
    return hit % 2 == 1;
  }
});
var squareLines = [ new Line(100, 85, 124, 100), 
                     new Line(124, 100, 125, 130),
					 new Line(125, 130, 95, 125),
					 new Line(95, 125, 100, 05) ];
/*
     100, 100
	                     124, 104
						 
**********************119,128***************			 
   95, 125
                      120, 130
*/
var r = new Region( squareLines );
if( r.hitTest( 102, 102 ) == false ){
  alert("That ain't right, 102, 102 is a hit");
}
if( r.hitTest( 119, 128 ) == false ){
  alert("That ain't right, 118, 128 is a hit");
}
if( r.hitTest( 200, 200 ) ){
  alert("That ain't right, 200, 200 is not a hit");
}



var wtrFllFace = new Region( [new Line(30, 18, 63, 35), new Line(63, 35, 60, 50),
                              new Line(60, 50, 30, 35), new Line(30, 35, 30, 18)] );
</script>
<title>Ajax Progress</title>
</head>

<body bgcolor="#0033FF">
<div id="ajax-progress">Loading<blink>...</blink></div>
<a href="#" onclick="runAjax()">Do Ajax</a>

</body>
</html>
